<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formInline.title" placeholder="请输入标题关键字"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.content" placeholder="请输入内容关键字"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="load">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mid">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="adds">添加</el-button>
          <el-button type="primary" @click="deletes">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template>
      <el-table :data="tableData" style="width: 100%" border :row-key="getRowKey" ref="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="通知标题" width="218">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="通知详细" width="218">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleshow(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="218">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理员ID" width="218">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.adminId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="通知详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="" :label-width="formLabelWidth">
          <div v-html="form.content"></div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>

      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible2">
      <el-form :model="form">
        <el-form-item label="通知标题" :label-width="formLabelWidth2">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="通知内容" :label-width="formLabelWidth2">
          <template>
            <quill-editor class="ql-editor" v-model="form.content" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </template>
          
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="change">确定</el-button>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>

      </div>
    </el-dialog>

    <el-dialog title="创建" :visible.sync="dialogFormVisible3">
      <el-form :model="forms">
        <el-form-item label="通知标题" :label-width="formLabelWidth2">
          <el-input v-model="forms.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="通知内容" :label-width="formLabelWidth2">
          <template>
            <quill-editor class="ql-editor" v-model="forms.content" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </template>
          
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="change2">确定</el-button>
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>

      </div>
    </el-dialog>




    <div class="block">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="Number(pageSize)"
        layout="total, sizes, prev, pager, next, jumper" :total="Number(total)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
const XLSX = require('xlsx');
import { yonghu, shanchu,bianji,tianjia,plsc } from '@/api/xtgl/tzgl.js';
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  name: 'DocumentsNotice',
  components: {
    quillEditor
  },
  data() {
    return {
      forms: {
        content: '',
        title: ''
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },
      formInline: {
        title: '',
        content: '',
      },
      form: {
        content: '',
        title: ''
      },
      content: '', // 在这里添加了 content 属性的定义
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      pageSize: '20',
      total: '',
      currentPage4: 1,
      tableData: [],
      formLabelWidth: '280px',
      formLabelWidth2: '120px',
      selectedRows: []
    };
  },
  mounted() {
    this.show();
  },
  methods: {
    getRowKey(row) {
      return row.id; // 假设每一行数据有 id 字段作为唯一标识，根据实际情况修改
    },
    deletes(){
      const selectedIds = this.selectedRows.map(row => row.id); // 提取选中行的 id
      console.log('选中行的 id:', selectedIds);
      plsc({
        ids:selectedIds
      }).then((res)=>{
        console.log(res);
        if(res.errmsg=='成功'){
          this.$notify({
            title: '成功',
            message: '批量删除成功',
            type: 'success'
          });
          this.dialogFormVisible3 = false;
          this.show();
        }
      })
      // 这里可以添加调用删除接口的逻辑，传入 selectedIds 数组
    },
    adds(){
      this.dialogFormVisible3=true
    },
    change2(){
      tianjia({
       ...this.forms
      }).then((res)=>{
        console.log(res);
        if(res.errmsg=='成功'){
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          });
          this.dialogFormVisible3 = false;
          this.show();
        }
      })
      
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text);
      this.content = html;
    },
    change() {
      bianji({
       ...this.form,
      }).then((res) => {
        console.log(res);
        if(res.errmsg=='成功'){
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
          this.dialogFormVisible2 = false;
          this.show();
        }
      })


      
    },
    load() {
      // 创建一个工作簿对象
      let workbook = XLSX.utils.book_new();

      // 定义表头
      const headers = ['通知标题', '通知详细', '添加时间', '管理员ID'];

      // 从 tableData 中提取数据并转换为数组
      const data = this.tableData.map(row => [
        row.title,
        row.content,
        row.addTime,
        row.adminId,
      ]);

      // 在数据数组开头插入表头
      data.unshift(headers);

      // 创建一个工作表对象
      let worksheet = XLSX.utils.aoa_to_sheet(data);

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 导出Excel文件
      XLSX.writeFile(workbook, '通知管理.xlsx');
    },
    onSubmit() {
      yonghu({
       ...this.formInline,
        page: 1,
        limit: this.pageSize,
        sort: 'add_time',
        order: 'desc'
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      // 这里可以添加编辑的具体逻辑，比如填充表单数据等
      this.form = {...row };
      this.dialogFormVisible2 = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      shanchu({
       ...row
      }).then((res) => {
        console.log(res);
        if (res.errmsg == '成功') {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
          this.show();
        }
      });
    },
    handleshow(index, row) {
      this.dialogFormVisible = true;
      console.log(index, row);
      this.form.content = row.content;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.show();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.show();
    },
    show() {
      yonghu({
        page: this.currentPage4,
        limit: this.pageSize,
        sort: 'add_time',
        order: 'desc'
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新选中的行数据
    }
  },
  watch: {
    tableData: {
      handler() {
        this.$refs.table.clearSelection(); // 当表格数据变化时，清除选中状态
        this.selectedRows = [];
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.quill-editor ::v-deep .ql-container {
    min-height: 220px;
  }

 .ql-container {
    min-height: 230px;
  }

</style>